<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>文章管理</title>
		<link rel="icon" th:href="${config.SITE_ICON}">
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/bootstrap.min.css'}"/>
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/iconfont/iconfont.css'}"/>
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/app.css'}"/>
	</head>
	<body>
		<div class="z-content">
			<div class="z-card">
				<div class="z-card-body z-card-body-tight">
					<form id="formSearch" class="form-horizontal form-search">
						<div class="form-group col-md-3 col-sm-6">
							<label class="control-label  col-xs-4">文章标题:</label>
							<div class="col-xs-8">
								<input id="param-title" type="text" class="form-control">
							</div>
						</div>
						<div class="form-group col-md-3 col-sm-6">
							<label class="control-label  col-xs-4">所属栏目:</label>
							<div class="col-xs-8">
								<input id="param-category" type="text" class="form-control">
							</div>
						</div>
						<div class="form-group col-md-3 col-sm-6">
							<label class="control-label  col-xs-4">是否置顶:</label>
							<div class="col-xs-8">
								<select id="param-isTop" class="form-control">
									<option value="">请选择</option>
									<option value="1">是</option>
									<option value="0">否</option>
								</select>
							</div>
						</div>
						<div class="form-group col-md-3 col-sm-6">
							<label class="control-label  col-xs-4">是否推荐:</label>
							<div class="col-xs-8">
								<select id="param-isRec" class="form-control">
									<option value="">请选择</option>
									<option value="1">是</option>
									<option value="0">否</option>
								</select>
							</div>
						</div>
						<div class="form-group col-md-3 col-sm-6">
							<label class="control-label  col-xs-4">是否公开:</label>
							<div class="col-xs-8">
								<select id="param-isPublic" class="form-control">
									<option value="">请选择</option>
									<option value="1">是</option>
									<option value="0">否</option>
								</select>
							</div>
						</div>
						<div class="form-group col-md-3 col-sm-6">
							<label class="control-label  col-xs-4">是否原创:</label>
							<div class="col-xs-8">
								<select id="param-origin" class="form-control">
									<option value="">请选择</option>
									<option value="1">原创</option>
									<option value="2">转载</option>
								</select>
							</div>
						</div>
						<div class="form-group col-md-3 col-sm-6">
							<label class="control-label  col-xs-4">状态:</label>
							<div class="col-xs-8">
								<select id="param-status" class="form-control">
									<option value="">请选择</option>
									<option value="1">已发布</option>
									<option value="0">草稿</option>
								</select>
							</div>
						</div>
						<div class="form-group col-md-1 col-sm-6 text-left">
							<div class="col-sm-12">
								<button type="button" id="btn_query" class="btn btn-primary">查询</button>
							</div>
						</div>
					</form>
				</div>
			</div>
            <div class="z-card">
                <div class="z-card-body">
					<div class="btn-group z-table-btn-group" role="group">
						<button id="btn_add" type="button" class="btn btn-primary">写文章</button>
						<button id="btn_batch_delete" type="button" class="btn btn-danger">批量删除</button>
					</div>
                    <table id="table" data-url="/admin/article/list" data-key="id" data-response-handler="responseHandler" data-query-params="queryParams">
                        <thead>
                            <tr>
								<th data-checkbox="true"></th>
                                <th data-field="title" data-align="center" data-formatter="formatTitle">标题</th>
								<th data-field="category" data-align="center" data-formatter="formatCategory">栏目</th>
								<th data-field="tagList" data-align="center" data-formatter="formatTags">标签</th>
								<th data-field="lookNum" data-align="center">浏览</th>
								<th data-field="commentNum" data-align="center">评论</th>
								<th data-field="supportNum" data-align="center">喜欢</th>
								<th data-field="aliasName" data-align="center">路径别名</th>
								<th data-field="template" data-align="center">模板名称</th>
								<th data-field="status" data-align="center" data-formatter="formatStatus">状态</th>
								<th data-field="createTime" data-align="center">创建时间</th>
                                <th data-field="id" data-align="center" data-formatter="formatOpt" data-width="100">操作</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
		</div>
		<script th:src="${config.SITE_CDN+'/static/js/jquery.min.js'}"></script>
		<script th:src="${config.SITE_CDN+'/static/js/bootstrap.min.js'}"></script>
		<script th:src="${config.SITE_CDN+'/static/js/app.js'}"></script>
        <script>
            $(function () {
            	App.initSelect("select");
                App.initTable("#table");
				App.postAjax("/admin/category/list",{disabled:true},function (data) {
					var treeSelectOptions = {
						placeHolder: "请选择",
						data: data.data,
						iconType: 2,
						nameField: 'name',
						valueField: 'id'
					};
					App.initTreeSelect("#param-category", treeSelectOptions);
				});

				$("#btn_query").on('click', function(){
					App.refreshTable("#table");
				});

				$("#btn_add").on('click', function(){
                    parent.addTabs({id:'900101', title:'写文章', close:true, url:'article/add', hashChange:true});
				});

                $("#btn_batch_delete").on('click', function(){
                    var checkedRows= App.getTableSelections("#table");
                    if(checkedRows.length>0){
                        App.confirm({content: "确定删除选中的"+checkedRows.length+"条记录？"},function () {
                            var ids=[];
                            $.each(checkedRows, function (i, item) {
                                ids.push(item.id);
                            });
                            App.postAjax("/admin/article/delete", {"ids": ids}, function (data) {
                                if (data.status === 200) {
                                    App.refreshTable("#table");
                                }
                                App.msgS(data.msg);
                            })
                        })
                    }else{
                        App.msgE("请选择至少一条记录");
                    }
                });
            });

			function  queryParams() {
				return {
					keyword:$("#param-title").val(),
					categoryId:$("#param-category").val(),
					isTop:$("#param-isTop").val(),
					isRec:$("#param-isRec").val(),
					isPublic:$("#param-isPublic").val(),
					origin:$("#param-origin").val(),
					status:$("#param-status").val()
				}
			}

            function responseHandler(data){
                return data.data;
			}

			function formatTitle(index,value,row) {
            	return '<a class="article-title-a" href="/a/'+row.aliasName+'" target="_blank">'+value+'</a>';
			}

			function formatCategory(index,value) {
				return value.name;
			}

			function formatTags(index,value) {
            	var tags="";
				$(value).each(function (tagIndex,tagValue) {
;					tags+='<span class="badge badge-tag">'+tagValue.name+'</span>';
				})
				return tags;
			}

			function formatStatus(index,value) {
				return value?'<label class="badge badge-success">已发布</label>':'<label class="badge badge-warning">草稿</label>';
			}

            function formatOpt(index,value,row){
                var editBtn = '<a class="btn btn-xs btn-outline-primary mr-5" onclick="editArticle('+value+')">编辑</a>';
                var deleteBtn = '<a class="btn btn-xs btn-outline-danger" onclick="deleteArticle('+value+')">删除</a>';
                return editBtn + deleteBtn;
            }

            function editArticle(articleId) {
				parent.addTabs({
					id:"article-"+articleId,
					title:"编辑文章-"+articleId,
					url:"article/edit/"+articleId,
                    close: true
				});
            }

            function deleteArticle(value) {
				App.confirm({content: "确定删除?"},function () {
					App.postAjax("/admin/article/delete", {"ids": [value]}, function (data) {
						if (data.status === 200) {
							App.refreshTable("#table");
                            App.msgS(data.msg);
						}else{
                            App.msgE(data.msg);
						}
					})
				})
            }


        </script>

	</body>
</html>
